<template>
  <div>
    <ListPage :newList="arr" @info="show" @keyword="filt"></ListPage>
    <InfoPage
      :info="list.filter((item) => item.id === id)[0]"
      v-if="flag"
      @close="flag = false"
    ></InfoPage>
  </div>
</template>
<script>
import ListPage from "../zuoye/Hospital/ListPage.vue";
import InfoPage from "../zuoye/Hospital/InfoPage.vue";
export default {
  components: {
    ListPage,
    InfoPage,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          id: 2,
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          id: 3,
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      flag: false,
      id: 1,
      keyword: "",
      arr: [
        {
          id: 1,
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          id: 2,
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          id: 3,
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {
    show(i) {
      this.id = i;
      this.flag = true;
    },
    filt(keyword) {
      this.keyword = keyword;
    },
  },
  watch: {
    keyword: {
      handler(newVal) {
        this.arr = this.list.filter((item) => {
          return (
            item.diagnosis.includes(newVal) ||
            item.prescription.includes(newVal) ||
            item.doctor.includes(newVal) ||
            item.date.includes(newVal)
          );
        });
      },
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
